<template>
  <div class="renewDetail">
    <p class="renewDetailTip center">{{ $t('renew.theUpperLimit') }}</p>
    <p class="renewDetailTime center">{{ $t('renew.renewAfter', {time:handleTime(user.expireTime)}) }}</p>
    <el-button type="primary" class="btn" @click="handleComfirm">
      {{ $t('public.sure') }}
    </el-button>
  </div>
</template>

<script>
import { Decimal } from 'decimal.js'
import { toLocalTime } from '@/utils/validate';

export default {
  name: 'renewDetail', // 续费详情
  data() {
    return {
      // orderTime: ''
    }
  },
  components: {},
  props: {
    user: Object
  },
  watch: {
  },
  computed: {},
  created() {},
  mounted() {
    // this.orderTime = this.handleTime(this.user.orderTime);
  },
  beforeDestroy() {},
  methods: {
    handleComfirm() {
      this.$emit('listenRenewDetail');
    },
    // 消耗会员日期
    handleTime(val) {
      const toLocalDate = toLocalTime(val);
      const expireTime = toLocalDate.replace(/-/g, '/');
      const lastDate = new Date(expireTime).getTime();
      const countDay = 360 * 1000 * 60 * 60 * 24
      const result = Decimal.sub(lastDate, countDay).toString()
      return toLocalTime(Number(result)).substring(0, 10)
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/views/myWallet/member/privilege/public.scss';
.renewDetail {
  color: #333;
  font-size: 16px;
  padding: 10px 60px;

  .caption {
    margin-bottom: 20px;
  }

  .account {
    margin-bottom: 10px;
  }

  .btn {
    display: block;
    margin: 30px auto 10px;
    width: 100%;
    background: linear-gradient(to top, #EDC16C, #F9DB75);
    color: #8B572A;
    border: none;
  }

  .renewDetailTip {
    margin-bottom: 20px;
  }

  .renewDetailTime {
    color: #999;
  }
}

.theme-1B1D27 {
  .renewDetail {
    color: rgba(255, 255, 255, 0.8) !important;
  }
}
</style>

